@import "common.less";
html,body{height:100%;}
body{background:url("../img/list_bg.jpg") 0 0 no-repeat; background-size:cover; background-attachment:fixed;}
.body{height:100%;}

//底部显示
footer{
  .foot-left{
    .info{border-left-color: #458abc;}
    .line{background-color: #458abc;}
    .data{
      span{color: fadeout(#425563,70%);}
    }
  }
  .foot-right{
    .tit{color: fadeout(#425563,50%);float: right;margin-bottom: 0;}
    .con{color: fadeout(#425563,70%);float: left;margin-right: 20px;margin-top: 15px;
      span{display: none;}
    }
  }
}

.menu-side{display: none;}

.nav{background:rgba(255,255,255,0.7); position: fixed; top:0; width:100%; height:80px; z-index: 2;
  .logo{float:left; width:245px; height:80px; background:url("../img/logo.png") no-repeat;}
  ul{float:right; line-height: 80px; background:#fff;}
  li{float:left;border-right:1px #dcdedf solid;
    &.on{background:#4fb8eb;
      a{color:#fff;}
    }
    a{color:#335471; display: block;font-size: 16px;padding: 0 30px;}
  }
}

.listarea{height:100%; width:100%; position: relative;
  .leftnav{width:150px; text-align: center; position: fixed; top:50%; margin-top:-200px; z-index:10;
    a{display:block; color:#adbac6; line-height: 66px; font-size:26px; position: relative; cursor: pointer;
      &:after{content:""; width:1px; height:18px; background:#adbac6; position: absolute; left:49%; bottom:-10%; font-size:26px; color:#adbac6;}
      &:last-child{
        &:after{display: none;}
      }
      &.on{font-size:56px; color:#4cb7f0;}
    }
  }
  .item{height:100%;}
  .content{height:100%; width:100%; position: relative;
    &:after{content:""; display:block; width:80%; margin-left:200px; height:0px; border-bottom: 1px #d8d8d8 solid;}
    .area{display: table; width:100%; height:100%; vertical-align: middle; padding-top:3%;}
    .text{padding-left:250px; display: table-cell; vertical-align: middle;
      .title{font-size:52px; color:#556674; font-weight: bold; position: relative; margin-bottom:100px;
        &:before{content:''; width:5px; height:77px; background:#556674; display:inline-block; vertical-align: middle; margin-right:25px;}
      }
      .desc{font-size:16px; color:#495763; line-height:30px; width:530px; text-align: justify; margin-bottom:100px; min-width:400px; margin-left:35px;}
      .btns{
        a{display: inline-block; margin-right:25px; width:150px; height:50px; font-size:18px; color:#fff; text-align: center; line-height:50px; background:#458abc;
          &:nth-child(2){background:#18c9d1;}
        }
      }
    }
    .app_img{display:none;}
    .img{display: table-cell; text-align: center; vertical-align: middle; padding: 0 50px; width:50%;
      img{max-height:70%;}
    }
  }
}

.footer_app {
  display:none;
  margin-top:30/@rem;
  margin-bottom:150/@rem;
  padding-left: 110/@rem;
  color: #999;
  font-size: 25/@rem;
  line-height: 30/@rem;
  &:before {
    content: '';
    display: block;
    width: 33/@rem;
    height: 3/@rem;
    background: #999;
    margin-bottom: 20/@rem;
  }
}

.showDetial{position: fixed; background:#fff; z-index:101; width:900px; left:50%; margin-left:-450px; height:80%; overflow-x: hidden; overflow-y: auto; top:10%;
  &:before{content: ''; position: fixed; width:100%; height:100%; background:rgba(198,198,198,0.8); z-index:2; top:0; left:0;}
  .areatitle{color:#556674; font-size:56px; padding: 0 10%; margin:0 auto; height:100px; line-height: 100px; border-bottom: 1px #d9d9d9 solid;}
  .detial{z-index:3;}
}

@media screen and (max-width: 1300px){
  .listarea{
    .content{
      &:after{margin-left:150px;}
      .text{padding-left:150px;
        .title{margin-bottom: 50px;}
        .desc{width:50%; margin-bottom:50px;}
      }
    }
  }
}

@media screen and (max-width: 1000px){
  .body{width:1000px;}
  .nav{width:1000px;}
  .listarea{width:1000px;}
}

@media screen and (max-width: @sreen){
  body{width:100%; background:url("../img/list_bg_app.jpg") 0 0/contain no-repeat #f2f2f2; background-attachment:fixed;}
  .body{width:100%;}
  .menu-side{display: block;}
  .nav{width:100%; height:125/@rem; background:rgba(227,227,227,0.35); border-bottom: 4/@rem #b8c0c4 solid;
    .logo{width:320/@rem; height:125/@rem; background:url("../img/list_logo_app.png") 0 0/contain no-repeat;}
    ul{display: none;}
  }
  .listarea{width:auto; height:auto; padding-left: 120/@rem;
    .leftnav{margin-top:0; width:75/@rem; left:30/@rem; top:28%;
      a{font-size:25/@rem; line-height:50/@rem;
        &:after{width:2/@rem; height:12/@rem;}
        &.on{font-size:45/@rem;}
      }
    }
    .content{border-bottom:3/@rem #d8d8d8 solid; width:85%; height:auto; position: static; overflow: hidden; padding-bottom:125/@rem; padding-top: 125/@rem;
      &:after{display:none;}
      .area{display: block; height:auto; padding:0; overflow: hidden;}
      .text{padding:0;
        .title{margin:0 0 50/@rem; font-size:52/@rem;
          &:before{display: none;}
          &:after{content: ""; display:block; width:55/@rem; height:3/@rem; background:#556674; margin-top: 40/@rem;}
        }
        .desc{width:100%; margin-left:0; margin-bottom:50/@rem; font-size:25/@rem; line-height: 35/@rem; min-width: inherit;}
        .btns{
          a{width:243/@rem; height:90/@rem; line-height: 95/@rem; font-size:32/@rem; margin-right:34/@rem;
            &:last-child{margin:0;}
          }
        }
      }
      .img{display: none;}
      .app_img{display:block; height:533/@rem; margin-top:30/@rem; margin-bottom: 50/@rem; overflow: hidden;
        img{height:100%; max-height: none; max-width: none;}
      }

    }
  }
  .footer_app{display: block;}

  .showDetial{display: none;}
}